<template>
  <div>
    <template v-if="fromType == ''">
      <!-- //普通用户 -->
      <div class="c-flex-row c-aligni-center" v-if="vipType==1 && isShowOrdinary">
        <img src="../../../../public/i/wap/memberIndex/normalVip.png" alt="" class="c-ww36 c-hh36 imgCloseBig c-p c-block">
        <div class="c-bg-f2 c-text-ellipsis1 c-fc-sblack c-pr10 c-pl10 c-textAlign-c c-ml-22 c-pl28 c-lh-n c-br16 c-maxw242 c-fs18 c-pv2 c-flex-row c-aligni-center">普通用户</div>
      </div>
      <!-- //svip、vip -->
      <div class="c-flex-row c-aligni-center" v-else-if="vipType==2 || vipType==4">
        <img src="../../../../public/i/wap/memberIndex/mbvip.png" alt="" class="c-ww36 imgCloseBig c-p c-inlineblack c-vcAlign-middle">
        <div class="c-mbIndexBg2 c-pr10 c-textAlign-c c-br16 c-maxw242 c-fs18 c-ml-22 c-pl28 c-lh-n c-fc-xlblown c-text-ellipsis1 c-pt4 c-flex-row c-aligni-center">
          {{vipType==2 ? 'VIP' : 'SVIP'}}</div>
      </div>
      <!-- //代理商 -->
      <div class="c-flex-row c-aligni-center" v-else-if="vipType==3 || vipType>=5">
        <img src="../../../../public/i/wap/memberIndex/mbAgent.png" alt="" class="c-ww50 imgCloseBig c-p c-inlineblack c-vcAlign-middle">
        <div class="c-mbIndexBg1 c-maxw242 c-fs18 c-fc-white c-text-ellipsis1 c-pr10 c-ml-22 c-pl28 c-lh-n c-pl10 c-textAlign-c c-br16 c-pv2 c-flex-row c-aligni-center">
          {{custNameMap[`${vipType}`] && custNameMap[`${vipType}`].length > 5 ? (custNameMap[`${vipType}`].substring(0, 5) + '...') : custNameMap[`${vipType}`]}}
        </div>
      </div>
    </template>
    <template v-if="fromType == 'shareholder'">
      <!-- //普通用户 -->
      <div class="c-flex-row c-aligni-center" v-if="shareholderType == 0">
        <img src="../../../../public/i/wap/memberIndex/normalVip.png" alt="" class="c-ww36 c-hh36 imgCloseBig c-p c-block">
        <div class="c-bg-f2 c-text-ellipsis1 c-fc-sblack c-pr10 c-pl10 c-textAlign-c c-ml-22 c-pl28 c-lh-n c-br16 c-maxw242 c-fs18 c-pv2 c-flex-row c-aligni-center">非股东</div>
      </div>
      <!-- //股东 -->
      <div class="c-flex-row c-aligni-center" v-else-if="shareholderType > 0">
        <img src="../../../../public/i/wap/memberIndex/mbAgent.png" alt="" class="c-ww50 imgCloseBig c-p c-inlineblack c-vcAlign-middle">
        <div class="c-mbIndexBg1 c-maxw242 c-fs18 c-fc-white c-text-ellipsis1 c-pr10 c-ml-22 c-pl28 c-lh-n c-pl10 c-textAlign-c c-br16 c-pv2 c-flex-row c-aligni-center">
          {{arrAgentName.length > 0 ? (arrAgentName[`${shareholderType - 1}`].name.length > 5 ? (arrAgentName[`${shareholderType - 1}`].name.substring(0, 5) + '...') : arrAgentName[`${shareholderType - 1}`].name) : '股东'}}
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
export default {
  components: {
  },
  props: {
    vipType: {
      type: [Number, String],
      default: 1
    },
    fromType: { // 传shareholder标识显示股东身份
      type: String,
      default: '',
    },
    arrAgentName: {
      type: Array,
      default: () => [],
    },
    shareholderType: {
      type: [Number, String],
      default: 1
    },
    isShowOrdinary: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      custNameMap: {}
    };
  },
  mounted() {
    this.custNameMap = utilJs.getCustNameMap();
  },
  methods: {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
